<template>
  <div>
    <div class="profile" @click="editProfile">
      <!-- <img class="avatar" src='@/assets/logo.png'> -->
      <!-- <img v-if="!profile.head_img" class="avatar" src="@/assets/logo.png" alt />
      <img v-else class="avatar" :src="'http://127.0.0.1:3000'+profile.head_img" alt /> -->
      <img  class="avatar" :src="profile.head_img" alt />
      <div class="profile-middle">
        <div class="name">
          <span v-if="profile.gender==1" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>
          {{profile.nickname}}
        </div>
        <div class="time">2015-09-30</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <cellBar label="我的关注" desc="关注的用户" @jump="$router.push('/myfollow')"></cellBar>
    <cellBar label="我的跟帖" desc="跟帖/回复" @jump="$router.push('/mycomments')"></cellBar>
    <cellBar label="我的收藏" desc="文章/视频" @jump="$router.push('/mycollections')"></cellBar>
    <cellBar label="设置" @jump="editProfile"></cellBar>
    <cellBar label="退出登陆" @jump="logout"></cellBar>
  </div>
</template>

<script>
import cellBar from "../components/cellBar";
export default {
  data() {
    return {
      profile: {}
    };
  },
  components: {
    cellBar: cellBar
  },
  methods: {
    jumpToPage(laber) {
      console.log("跳转到" + laber + "页面");
    },
    editProfile() {
      this.$router.push({
        name: "editProfilePage"
      });
    },
    logout() {
      // 清除token和user_id
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      this.$router.replace({
        // push的方法是返回上一页，逐页返回，浏览器上会有记录，如果用push就会无限循环，没有用
        // reqlace方法可以替换掉当前页的记录，解决了push不能解决的无限循环这个问题
        path: "/login"
      });
    }
  },
  mounted() {
    // 在这里应该显示用户数据
    this.$axios({
      url: "/user/" + localStorage.getItem("user_id"),
      method: "get",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      this.profile = res.data.data;
      console.log(this.profile);
      if(!this.profile.head_img){
        this.profile.head_img = "/static/imgs/avatar.jpg"
      }else{
       this.profile.head_img=this.$axios.defaults.baseURL+this.profile.head_img
      }
    });
  }
};
</script>

<style lang='less' scoped>
.profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8.333vw;
  border-bottom: 5px solid #eee;
}
.profile-middle {
  flex: 1;
  padding-left: 2.778vw;
  font-size: 4.444vw;
}
.time {
  font-size: 14px;
}
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
</style>